<template>
  <div class="profile-introduce" v-if="article">
    <div class="container">
      <!-- 
        <div class="profile-title">
        <h3>公司介绍</h3>
      </div>
       -->

      <!-- <div class="profile-content" v-html="article.content.rendered"></div> -->
      <div class="profile-content">
        <iframe
          id="articleIframe"
          style="width: 100%"
          scrolling="no"
          frameborder="0"
          :src="wordPressArticleUrl"
        >
        </iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getArticleById } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  article: { title: "", content: { rendered: "" }, date: "T" },
  wordPressArticleUrl: `/wordpress/archives/33`,
});
const { article, wordPressArticleUrl } = toRefs(data);

onBeforeMount(async () => {
  await getArticleById(33).then((res) => {
    data.article = res.data;
  });
});
onMounted(() => {
  var iframeObj = document.getElementById("articleIframe");
  iframeObj.onload = function () {
    proxy.$iframeAutoFit(iframeObj);
  };
});

const methods = {};
</script>
<style lang="scss" scoped>
.profile-introduce {
  padding: 100px 0;

  .profile-title {
    margin-top: 50px;
  }

  .profile-content {
    // margin-top: 50px;
  }
}
</style>
